
// reset
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html,body{height: 100%;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5; font-size:.14rem;}
body,button,input,select,textarea{font-family:'PingFang SC Regular','helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
input{
  border-width: 0;
  outline: none;
  background: none;
}
button{
  border: none;
  outline: none;
  background: none;
}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
input:focus{outline:none;}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
body{background:#fff;}
input::-webkit-input-speech-button {display: none}
button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    // tap高亮 一般给透明即可
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  .clearfix::before,
  .clearfix::after{
    content:'';
    display: block;
    line-height: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix{
    // 移动端这里可以省略
    zoom: 1;
  }
  
  
 

  //自定义函数 语法
//   @function p2r($size){ // px 转 rem
//     @return ($size/32)*1rem;
//   }
  
  //混入 语法
  // @mixin size($width,$height){
  //   width: ($width/32)*1rem;
  //   height:($height/32)*1rem;
  // }
  
  // 一像素下边框
  @mixin bottom-border-1px($color){
    position: relative;
    border: none;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: $color;
      transform: scaleY(0.5);
    }
  }
  // 一像素top边框
  @mixin top-border-1px($color){
    position: relative;
    border: none;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      background-color: $color;
      transform: scaleY(0.5);
    }
  }
  //1像素右边框
  @mixin right-border-1px($color){
    position: relative;
    border: none;
    &::after{
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 1px;
      background-color: $color;
      transform: scaleX(0.5);
    }
  }
  
  //根据像素比缩放1px像素边框
  @media only screen and (-webkit-device-pixel-ratio: 2 ){
    .border-1px{
      &::before{
        transform :scaleY(.5);
      }
    }  
  }
  @media only screen and (-webkit-device-pixel-ratio: 3 ){
    .border-1px{
      &::before{
        transform :scaleY(.333333);
      }
    }  
  }
  
  @mixin background($url,$width,$height){
    background: url($url) no-repeat;
    background-size: $width,$height;
  }
  //定义颜色变量
  $c-33: #333333;
  // $c-33: red;
  $c-03:#033333;
  $c-2a: #2a2a2a;
  $c-0b: #0b0b0b;
  $c-fb: #fbfbfb;
  $c-ffba17: #ffba17;//主题色
  $c-99: #999999;
  $c-b1aea9: #b1aea9;
  $c-ff:#ffffff;
  $c-ef: #efefef;
  $c-fa: #fafafa;
  // 圆角变量
  $radius-10: 0.1rem;
  //字体变量
  $f-Medium: "PingFang SC Medium" ;
  $f-Bold: "PingFang SC Bold";
  $f-Regular: "PingFang SC Regular";
  /*显示省略号*/
  .ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // flex 布局 
 //水平 flex
  .flex-r-e{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .flex-r-s{
    display:flex;
    align-items: center;
    justify-content: flex-start;
  }
  .flex-r-b{
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .flex-r-c{
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .flex-r-a{
      display: flex;
      align-items: center;
      justify-content: space-around;
  }
  //垂直 flex
  .flex-c-b{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
  }
  .flex-c-a{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  // 用父标签大小来控制 img 大小
  img{
      width: 100%;
      height: 100%;
      display: block;
  }
  .btn-big{
    width: 100%;
    height: .9rem;
    color: white;
    font-size: .3rem;
    border-radius: .45rem;
    background: $c-ffba17;
  }

//swiper
.swiper-container{
    height: 3.5rem;
    border-radius: $radius-10;
    overflow: hidden;
}
.swiper-pagination-bullet{
    background: white;
    width: .14rem;
    height: .14rem;
    border-radius: .07rem;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background: $c-ffba17;
}
.swiper-container-horizontal>.swiper-pagination-bullets{
    bottom: .1rem ;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 .1rem;
}


//添加到购物车
// .bottom-bar{
//   left: 0;
//   position: absolute;
//   width: 100%;
//   height: .98rem;
//   bottom: 0;
//   text-align: center;
//   font-size: .3rem;
//   letter-spacing: .03rem;
//   z-index: 9;
//   background: white;
//   .cart{
//       flex: 1;
//       height: 100%;
//       position: relative;
//       background: url("../images/icon/icon_15.png") no-repeat;
//       background-size: .56rem .48rem;
//       background-position: .26rem .35rem; 
//       .count{
//           position: absolute;
//           top: 0.1rem;
//           left: .55rem;
//           padding: 0 .09rem 0 .13rem;
//           line-height: .44rem;
//           text-align: center;
//           height: .44rem;
//           min-width: .44rem;
//           border-radius: .22rem;
//           background: $c-ffba17;
//           color: white;
//           font-size: .24rem;
//       }
//   }
//   .btn{
//       color: $c-ffba17;
//       background: $c-fb;
//       width: 2.88rem;
//       height: 100%;
//       line-height: .98rem;
//       &:nth-child(3){
//           color: white;
//           background: $c-ffba17;
//       }
//   }
// }